<template>
  <el-main>
    <el-row>
      <el-col :span="8">
        <el-image :src="require('@/assets/img/input-img/book_input.png')" class="book_input" @click="gotoBookView"></el-image>
        <h4 class="book_input_font">图书录入</h4>

      </el-col>

      <el-col :span="8"></el-col>

      <el-col :span="8">
        <el-image :src="require('@/assets/img/input-img/paper_input.png')" class="paper_input" @click="gotoPaperView"></el-image>
        <h4 class="paper_input_font">卷子录入</h4>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
import {defineComponent, ref} from 'vue'
import {useRouter} from "vue-router";
export default defineComponent({
  name: "input-page",
  setup() {
    const router = useRouter();
    const gotoBookView= ()=>{
       router.push({
         path: "/book-input",
       });
    }

    const gotoPaperView = () => {
      router.push({
        path: "/paper-input",
      });
    }

    return {
      gotoBookView,
      gotoPaperView
    }
  }
});
</script>

<style scoped>

.book_input {
  width: 230px!important;
  height: 230px!important;
  margin-top: 80px!important;
  margin-left: 65px!important;
}

.book_input_font {
  font-weight: normal;
  font-size: 22px;
  margin-left: 130px!important;
}

.paper_input {
  width: 230px!important;
  height: 230px!important;
  margin-top: 80px!important;
  margin-right: 65px;
}

.paper_input_font {
  font-weight: normal;
  font-size: 22px;
  margin-left: 75px!important;
}
</style>